/**
 * @file _axiom-back-to-top.scss
 * @description AxiomBackToTop 回到顶部按钮组件样式
 */

.axiom-back-to-top {
  position: fixed;
  bottom: var(--axiom-back-to-top-bottom, 80px); // 考虑到移动端底部导航栏
  right: var(--axiom-back-to-top-right, 20px);
  width: var(--axiom-back-to-top-width, 50px);
  height: var(--axiom-back-to-top-height, 50px);
  background: var(--axiom-primary-color);
  color: var(--axiom-text-color-inverse);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--axiom-box-shadow-base);
  transition: var(--axiom-transition-base);
  z-index: var(--z-index-notification, 1100); // 使用变量，提供回退
  
  &:hover {
    background: var(--primary-color-hover, var(--axiom-primary-color)); // 允许主题定义 hover 颜色
    transform: var(--axiom-back-to-top-hover-transform, translateY(-2px));
    box-shadow: var(--axiom-box-shadow-light);
  }
  
  &:active {
    transform: var(--axiom-back-to-top-active-transform, translateY(0));
  }
  
  svg {
    transition: transform 0.2s ease;
  }
  
  &:hover svg {
    transform: var(--axiom-back-to-top-svg-hover-transform, translateY(-1px));
  }
}

// 渐入渐出动画
.back-to-top-fade-enter-active,
.back-to-top-fade-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-to-top-fade-enter-from {
  opacity: 0;
  transform: var(--axiom-back-to-top-fade-transform, scale(0.8) translateY(10px));
}

.back-to-top-fade-leave-to {
  opacity: 0;
  transform: var(--axiom-back-to-top-fade-transform, scale(0.8) translateY(10px));
}

// 移动端适配
@media (max-width: 768px) {
  .axiom-back-to-top {
    width: var(--axiom-back-to-top-mobile-size, 45px);
    height: var(--axiom-back-to-top-mobile-size, 45px);
    bottom: var(--axiom-back-to-top-mobile-bottom, 90px); // 移动端底部导航栏更高
    right: var(--axiom-back-to-top-mobile-right, 16px);
    
    svg {
      width: var(--axiom-back-to-top-mobile-svg-size, 18px);
      height: var(--axiom-back-to-top-mobile-svg-size, 18px);
    }
  }
}

// 小屏幕设备
@media (max-width: 480px) {
  .axiom-back-to-top {
    width: var(--axiom-back-to-top-sm-size, 40px);
    height: var(--axiom-back-to-top-sm-size, 40px);
    
    svg {
      width: var(--axiom-back-to-top-sm-svg-size, 16px);
      height: var(--axiom-back-to-top-sm-svg-size, 16px);
    }
  }
}

// Rainbow Cyber 主题专属“特效”
html.theme-rainbow-cyber .axiom-back-to-top {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  box-shadow: var(--rainbow-glow) !important;
  animation: rainbow-pulse 4s ease-in-out infinite alternate;
} 